<template>
  <view :class="$style.sliderBox" @touchend="sliderEnd">
    <movable-area :class="$style.sliderF">
      <movable-view class="flex items-center justify-center" :class="$style.sliderS" :animation="true" :x="{sliderX}" direction="horizontal" @change="startMove">收到
      </movable-view>
    </movable-area>
    <view :class="$style.bgC" class="flex items-center justify-end">
      <text style="margin-right: 40rpx;"> >>> 滑动到此处</text>
      <view :class="$style.bgC_left" :style="{width: backLeft + 'px'}"></view>
    </view>
  </view>

</template>

<script setup lang='ts'>
/***
 * 警情调派 收到确认组件; 用于对新警情调派的确认操作
 */
import { ref } from 'vue'


let sliderX = ref<number>(0);
let backLeft = ref<number>(0);

const emit = defineEmits(['changeDispatchState'])

function sliderEnd() {
  console.log(sliderX.value);

  if (backLeft.value > 100) {
    console.log("[验证成功]");
    // TODO 切换成 出动状态
    emit("changeDispatchState")
  } else {
    setTimeout(() => {
      console.log("回复原位");
      sliderX.value = 0;
    }, 1000);
  }
}

function startMove(e: any) {
  backLeft.value = e.detail.x + 18;
  sliderX.value = backLeft.value;
}
</script>

<style lang='less' module>
.sliderBox {
  width: 100%;
  margin: 20rpx auto;
  height: 80rpx;
  position: relative;
  font-family: Microsoft YaHei;
  font-weight: 400;

  .sliderF {
    width: 100%;
    height: 100%;
    z-index: 3;
    .sliderS {
      background-image: linear-gradient(to bottom right, #5c21a8, #c90842);
      height: 80rpx;
      width: 180rpx;
      color: #ffffff;
      border-radius: 40rpx;
    }
  }

  .bgC {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    background-color: rgba(51, 51, 51, 0.1);
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 24px;
    color: #5678f4;
    font-size: 26rpx;
    text-align: center;
    overflow: hidden;
  }

  .bgC_left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 22rpx;
    border-top-left-radius: 22rpx;
    border-bottom-left-radius: 22rpx;
    line-height: 22rpx;
    font-size: 14rpx;
    background-color: transparent;
  }
}
</style>

function $emit(arg0: string) {
  throw new Error("Function not implemented.");
}
